<script lang="ts" setup>
import XplayerVideo from "./XplayerVideo.vue";

interface Props {
  title: string;
  parentVm: InstanceType<typeof XplayerVideo>;
  to: string | HTMLElement;
}
//@ts-ignore
const props = withDefaults(defineProps<Props>(),{
  title: '',
  parentVm: {},
  to: ''
})

</script>

<template>
  <Teleport :disabled="!!!to" :to="to">
    <div class="xgplayerTopPosUIToVueUi">
      <template v-if="parentVm.$slots?.TopPosUIToVueUi">
        <slot></slot>
      </template>
      <template v-else>
        <div class="content">
          <div class="title">
            {{ title }}
          </div>
        </div>
      </template>
    </div>
  </Teleport>
</template>

<style lang="scss" scoped>
.xgplayerTopPosUIToVueUi{
  width: 100%;
  .content{
    height: 50px;
    display: flex;
    align-items: center;
    color: white;
    padding: 0 16px;
    .title{

    }
  }
}
</style>

<style lang="scss">
.xgplayer-nostart{
  .xgplayerTopPosUIToVueUi{
    display: none;
  }
}
</style>
